<template>
  <button
    :title="i18nStore.translate(title)"
    :class="finalClass"
    @click="clickHandle"
    ref="container"
  >
    <SvgIcon :name="iconName" :iconClass="finalIconClass" />
  </button>
</template>

<script setup>
import { useI18nStore } from '@/stores';
const i18nStore = useI18nStore();
const props = defineProps({
  isInactive: {
    type: Boolean,
    default: false
  },
  isActive: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  iconName: {
    type: String,
    default: ''
  },
  iconClass: {
    type: String,
    default: 'vue-feather group-hover-text-theme feather'
  },
  customClass: {
    type: String,
    default:
      'group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground hover:text-theme-color'
  }
});
const container = ref(null);

const emit = defineEmits(['click']);
const clickHandle = () => {
  emit('click', container.value.getBoundingClientRect());
};
const finalClass = computed(() => {
  return props.isInactive
    ? `is-inactive ${props.customClass}`
    : props.customClass;
});
const finalIconClass = computed(() => {
  return props.isActive
    ? `${props.iconClass} text-theme-color`
    : props.iconClass;
});
</script>
